<template>
    <div id="login">
        <!-- 主体 -->
        <el-main>
            <!-- 头部 -->
            <el-page-header @back="$router.push('/')" content="用户注册" title="首页" class="header">
            </el-page-header>
            <el-row>
                <!-- 主体内容-左 -->
                <el-col :span="12">
                    <div class="grid-content bg-purple">
                    </div>
                </el-col>
                <!-- 主体内容-右 -->
                <el-col :span="12">
                    <div class="grid-content bg-purple-light">
                        <!-- 注册 -->
                        <div class="form_table">
                            <h2>用 户 注 册</h2>
                            <el-form
                            ref="form"
                            :model="regForm"
                            :rules="rules"
                            label-width="120px"
                            label-position="right"
                            size="medium ">
                                <el-form-item prop="user_email" label="账号：">
                                  <el-input
                                    v-model="regForm.user_email"
                                    prefix-icon="el-icon-user-solid"
                                    placeholder="请输入邮箱地址">
                                  </el-input>
                                </el-form-item>
                                <el-form-item prop="user_password" label="密码：">
                                  <el-input
                                    v-model="regForm.user_password"
                                    type="password" prefix-icon="el-icon-key"
                                    placeholder="请输入密码"
                                    show-password>
                                  </el-input>
                                </el-form-item>
                                <el-form-item prop="confirm_password" label="确认密码：">
                                  <el-input
                                    v-model="regForm.confirm_password"
                                    type="password"
                                    prefix-icon="el-icon-key"
                                    placeholder="请输入密码"
                                    show-password>
                                  </el-input>
                                </el-form-item>
                                <el-form-item prop="code" label="图形验证码：">
                                    <el-input v-model="regForm.code" placeholder="请输入图形验证码" prefix-icon>
                                        <canvas ref="myCanvas" slot="append" id="myCanvas" :width="canvas_w"
                                            :height="canvas_h" @click="getPicCode"></canvas>
                                    </el-input>
                                </el-form-item>
                                <el-form-item prop="email_code" label="邮箱验证码：">
                                    <el-input v-model="regForm.email_code" placeholder="请输入图形验证码" prefix-icon>
                                      <el-button
                                        ref="btn"
                                        :disabled="isSend"
                                        slot="append"
                                        @click="getEmailCode">
                                        {{ btnConten }}
                                      </el-button>
                                    </el-input>
                                </el-form-item>
                                <el-button type="primary" class="login_btn" @click="register">注册</el-button>
                            </el-form>
                            <span class="el-icon-right" @click="$router.push('/login')">去登录</span>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </el-main>
        <el-footer>
            <div class="footer">
            </div>
        </el-footer>

    </div>
</template>

<script>
import { verificaCode } from '@/utils/verifica_Code.js'
import { Message } from 'element-ui'
import { sendCodeService, regUserService } from '@/api/user.js'
export default {
  data () {
    return {
      canvas_w: 120, // 图形验证码的宽度
      canvas_h: 32, // 图形验证码的高度
      code_pic: '', // 图形验证码
      isSend: false, // 是否发送验证码---控制发送按键是否禁用
      count: 60, // 发送验证码倒计时
      btnConten: '发送验证码',
      // 准备表单数据
      regForm: {
        user_email: '', // 用户邮箱
        user_password: '', // 用户密码
        confirm_password: '', // 确认密码
        code: '', // 验证码
        email_code: '' // 邮箱验证码
      },
      // 接收过来的验证码
      sendCode: '',
      // 表单验证规则
      rules: {
        // 用户邮箱
        user_email: [
          { required: true, message: '请输入账号', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
        ],
        // 密码
        user_password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { pattern: /^[/\S]{6,20}$/, message: '长度在 6 到 20 个非空字符', trigger: 'blur' }],
        // 确认密码
        confirm_password: [{
          validator: (rule, value, callback) => {
            if (!value) return callback(new Error('请再次输入密码'))
            if (this.regForm.user_password !== this.regForm.confirm_password) {
              return callback(new Error('两次密码不一致'))
            } else {
              callback()
            }
          },
          trigger: 'blur'
        }],
        // 图形验证码
        code: [{ required: true, message: '请输入图形验证码', trigger: 'blur' }],
        // 邮箱验证码
        email_code: [{ required: true, message: '请输入邮箱验证码', trigger: 'blur' }]
      }
    }
  },
  // 这里请求数据
  created () {
    // const res = await regUserService()
    // console.log(res)
    // console.log(res.status + res.message)
  },
  // 这里调用dom
  mounted () {
    this.getPicCode()
  },
  // 方法
  methods: {
    // 获取图形验证码
    getPicCode () {
      this.code_pic = verificaCode('#myCanvas', this.canvas_w, this.canvas_h)
    },
    // 发送短信验证码
    async getEmailCode () {
      if (!this.regForm.code) {
        return Message.error('请输入图形验证码')
      }
      if (this.regForm.code.toUpperCase() !== this.code_pic.toUpperCase()) {
        this.regForm.code = ''
        this.getPicCode()
        return Message.error('图形验证码错误')
      }
      // TODO: 发送短信验证码
      // {.........发送短信验证码逻辑}
      const res = await sendCodeService(this.regForm.user_email)
      console.log(res)
      await Message.success('发送验证码成功')
      this.sendCode = res.data.email_code
      //   倒计时
      const timer = setInterval(() => {
        this.count--
        this.isSend = true
        this.btnConten = '重新发送' + this.count
        if (this.count === 0) {
          clearInterval(timer)
          this.count = 5
          this.btnConten = '重新发送'
          this.isSend = false
        }
      }, 1000)
    },
    async register () {
      await this.$refs.form.validate()
      if (this.regForm.email_code !== this.sendCode) {
        this.regForm.email_code = ''
        return await Message.error('邮箱验证码错误，请重新输入')
      }
      // TODO: 调用注册接口
      const res = await regUserService(this.regForm.user_email, this.regForm.user_password)
      if (res.message === '用户已经存在') return await Message.error(res.message)
      console.log(res)
      await Message.success('注册成功,请登录!')
      this.$router.push('/login')
    }
  },
  // 注册组件
  components: {
  }
}
</script>

<style lang="less" scoped>
#login {
    background-image: linear-gradient(#e66465, #9198e5);
    // background-image: linear-gradient(rgb(35, 124, 212), #85bce0);
}

.header {
    margin-top: 15px;
}

/deep/ .el-main {
    padding: 0;
    padding-bottom: 0;
}

.bg-purple {
    background: url(../../assets/维护，维修.png ) center no-repeat transparent;
}

// 右边
.bg-purple-light {
    display: flex;
    justify-content: center;
    align-items: center;

    .form_table {
        // background: rgba(138, 207, 235, .2);
        padding: 50px 30px 30px;
        box-shadow: 5px 5px 10px 7px #585858;
        // border: 2px solid #000;
        border-radius: 15px;
        text-align: center;
        h2{
            color: #f1f1f1;
            font-size: 28px;
            margin-bottom: 10px;
        }
        /deep/ .el-input__inner {
            background-color: transparent;
            border: 0px solid #000;
        }

        /deep/ .el-input__inner:focus {
            border: 1px solid #ccc;
        }

        /deep/.el-input-group__append canvas {
            padding: 0;
            width: 120px;
            // background-color: transparent;
        }

        .login_btn {
            width: 50%;
            margin: 30px 0;
        }

        .el-icon-back,
        .el-icon-right {
            color: #494b51;
        }
    }
}

.grid-content {
    // background-color: red;
    /* 线性渐变 - 从上到下（默认情况下）*/
    // background-image: linear-gradient(#e66465, #9198e5);
    border-radius: 4px;
    min-height: 600px;
}

/deep/ .el-footer {
    padding: 100;
    height: 200px;
}

.footer {
    font-size: 18px;
    // background-color: skyblue;
}</style>
